frontend/pages/e/[uuid]/options.tsx (view raw)
1import Box from '@mui/material/Box';
2import Container from '@mui/material/Container';
3import {useTheme} from '@mui/material/styles';
4import {PropsWithChildren} from 'react';
5import pageUtils from '../../../lib/pageUtils';
6import useEventStore from '../../../stores/useEventStore';
7import EventLayout, {TabComponent} from '../../../layouts/Event';
8import {
9 EventByUuidDocument,
10 Module,
11 ModuleDocument,
12 Enum_Userspermissionsuser_Lang as SupportedLocales,
13} from '../../../generated/graphql';
14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
16import {Typography} from '@mui/material';
17import {useTranslation} from 'next-i18next';
18import {getLocaleForLang} from '../../../lib/getLocale';
19
20interface Props {
21 modulesSettings?: Module;
22 eventUUID: string;
23 announcement?: string;
24}
25
26const Page = (props: PropsWithChildren<Props>) => {
27 return <EventLayout {...props} Tab={OptionsTab} />;
28};
29
30const OptionsTab: TabComponent<Props> = ({modulesSettings}) => {
31 const {t} = useTranslation();
32 const theme = useTheme();
33 const event = useEventStore(s => s.event);
34
35 if (!event) return null;
36
37 const carosterPlusActivated =
38 modulesSettings?.caroster_plus_enabled &&
39 event.enabled_modules?.includes('caroster-plus');
40
41 return (
42 <Box position="relative">
43 <Container
44 sx={{
45 p: 4,
46 mt: 6,
47 mb: 11,
48 mx: 0,
49 [theme.breakpoints.down('md')]: {
50 p: 2,
51 },
52 }}
53 >
54 {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
55 {modulesSettings?.caroster_plus_enabled && !carosterPlusActivated && (
56 <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
57 )}
58 {!modulesSettings?.caroster_plus_enabled && (
59 <Typography variant="overline">{t`options.no_module`}</Typography>
60 )}
61 </Container>
62 </Box>
63 );
64};
65
66export const getServerSideProps = pageUtils.getServerSideProps(
67 async (context, apolloClient) => {
68 const {uuid} = context.query;
69 const {host = ''} = context.req.headers;
70 let event = null;
71 let modulesSettings = null;
72
73 // Fetch event
74 try {
75 const {data} = await apolloClient.query({
76 query: EventByUuidDocument,
77 variables: {uuid},
78 });
79 event = data?.eventByUUID?.data;
80 } catch (error) {
81 return {
82 notFound: true,
83 };
84 }
85
86 // Fetch modules settings
87 try {
88 const {data} = await apolloClient.query({
89 query: ModuleDocument,
90 variables: {locale: context.locale},
91 });
92 modulesSettings = data?.module?.data?.attributes || {};
93
94 const {caroster_plus_description, caroster_plus_name} = modulesSettings;
95
96 if (
97 caroster_plus_description &&
98 caroster_plus_name &&
99 String(caroster_plus_description).length === 0 &&
100 String(caroster_plus_name).length === 0
101 ) {
102 console.warn(
103 'Module settings are not set for locale: ',
104 context.locale,
105 ' fallback to English'
106 );
107 const {data: enData} = await apolloClient.query({
108 query: ModuleDocument,
109 variables: {locale: SupportedLocales['en']},
110 });
111 modulesSettings = enData?.module?.data?.attributes;
112 }
113 } catch (error) {
114 console.error(error);
115 }
116
117 const description = await getLocaleForLang(
118 event?.attributes?.lang,
119 'meta.description'
120 );
121
122 return {
123 props: {
124 modulesSettings,
125 eventUUID: uuid,
126 metas: {
127 title: event?.attributes?.name || '',
128 description,
129 url: `https://${host}${context.resolvedUrl}`,
130 },
131 },
132 };
133 }
134);
135export default Page;